// item 左右单行滑动样式
<template>
  <scroll-view scroll-x class="book-list">
    <view class="book-item" v-for="(item, index) in computedList" :key="index" @click="$util.goUrl(`/pages/videoDetail?id=${item.id}`)" :style="'background-image: url(' + item.titleImgUrl + ')'">
      <view class="con">
				<view class="tit ellipsis">{{ ["全部", "农技百科", "春耕课程", "鲜果农技"][item.knowledgeTypeId] }}</view>
				<view class="flex-row-center">
				  <view class="desc ellipsis">{{ item.title }}</view>
				  <!-- <view class="time">10min</view> -->
				</view>
			</view>
    </view >
  </scroll-view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    limit: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {};
  },
  computed: {
    computedList() {
      const tempList = Object.freeze(this.list || []);
      if (!this.limit) return tempList;
      return tempList.slice(0, this.limit);
    },
  },
  methods: {
    // goUrl(item) {
    //   uni.navigateTo({
    //     url: "/pages/videoDetail",
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
.book-list {
  padding: 0 32rpx;
  overflow: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.book-item {
  background-repeat:no-repeat;
  background-size:100% 100%;
  position: relative;
  display: inline-block;
  width: 610rpx;
  height: 344rpx;
  border-radius: 16rpx;
  margin-right: 32rpx;
  margin-bottom: 20rpx;
  // background: #eee;
  color: #fff;
  overflow: hidden;
  font-size: 24rpx;
  &:last-child {
    margin-right: 0;
  }
	.con{
		position: absolute;
		width: 100%;
		height:100%;
		left:0;
		top:0;
		padding: 238rpx 24rpx 0;
		background:rgba(0,0,0,.1);
	}
  .tit {
    font-size: 34rpx;
    font-weight: 500;
  }
  .desc {
    margin-top: 22rpx;
    font-size: 24rpx;
    font-weight: 500;
  }
}
</style>
